<template>
	<scroll-view scroll-y :scroll-top="scrollTop" @scroll="_scroll" class="_page" :style="{ paddingBottom: searchVal && !showMember && !notShowClaimOutLine ? 'calc(144rpx + env(safe-area-inset-bottom))': 0 }">
		<!-- #ifdef APP-PLUS||MP -->
		<uni-nav-bar dark fixed backgroundStyle="#FFFFFF" color="#121317" status-bar>
			<template slot="left">
				<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
			</template>
			<template>
				<view class="nav_title">查招生专业及人数</view>
			</template>
			<!-- #ifdef APP-PLUS||H5 -->
			<template slot="right">
				<view class="_right" @click.stop="_shareOpen">
					<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
					<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
					<text class="text">分享</text>
				</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->
		<view class="_padding" style="background-color: #ffffff; padding-top: 20rpx">
			<mSearch :val="searchVal" :apiInfo="searchApiInfo" placeholder="请输入本科专业查询" @check="(e) => checkSearch(e)"></mSearch>
		</view>
		<!-- {{showMember}} -->
		<view class="default" v-if="!searchVal">
			<view class="img-box">
				<image src="https://bicpic.baikewang.com/images/1646994256440.png" mode="heightFix"></image>
				<view class="text">先在上方输入本科专业哦~</view>
			</view>
		</view>
		<!-- 截图区域 -->
		<view class="content-box" v-else id="htmlCanvas">
			<view class="search-box">
				<listSelection
					v-for="(item, index) in searchArr"
					:checkInfo="item.checkInfo"
					:checkSearch="item.checkSearch"
					@confirm="(e) => confirm(e, index)"
					:key="index"
					:label="item.label || ''"
					:value="item.value || ''"
					:unit="item.unit"
					class="search-lis"
					:list="item.list"
					:placeholder="item.placeholder"
				></listSelection>
			</view>
			<view class="school-table" :class="{ baike_logo: !showMember }"
			:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
				<uni-table emptyText="暂无更多数据" v-if="!showMember">
					<!-- 表头行 -->
					<uni-tr tr_class="thead">
						<uni-th align="left" width="50%">招生院校</uni-th>
						<uni-th align="center" width="30%">考生类型</uni-th>
						<uni-th align="center" width="20%">招生人数</uni-th>
						<uni-th align="center" width="35%">学制学费（每年）</uni-th>
						<uni-th align="center" width="35%"></uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in schoolList" :key="index">
						<uni-td align="left" width="50%">
							<view class="school-info">
								<view class="nature" v-if="item.school_type" :class="[schoolType[ item.school_type ]]">{{ item.school_type }}</view>
								<view class="table-bold">{{ item.school_name }}</view>
							</view>
						</uni-td>
						<uni-td align="center" width="30%" class="table-bold">{{ item.stu_type }}</uni-td>
						<uni-td align="center" width="20%" class="table-bold" v-if="item.plan||item.plan===0 " >{{ item.plan }}人</uni-td>
						<uni-td align="center" width="20%" class="table-bold" v-else >未公布</uni-td>

						<uni-td align="center" width="35%" class="table-bold">{{ item.system_price||'--' }}</uni-td>
						<uni-td align="center" width="35%">
							<!-- <view class="table-bold table-btn" @click.stop="recruitStudents(item)">查看历年招生人数</view> -->
							<view class="table-bold table-btn" @click.stop="popupBtnClick('查看考试报告', { major_id: item.major_id, university_school_id: item.university_school_id })">查看考试报告</view>
						</uni-td>
						<template slot="tips">
							<view class="majortips">
								<view class="border-major">{{ item.major_name }}</view>
							</view>
						</template>
					</uni-tr>
				</uni-table>
				<!-- 会员权益模块 -->
				<memberBenefits v-if="showMember"></memberBenefits>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="bottom_btn" v-if="searchVal && !showMember && !notShowClaimOutLine">
			<view class="primary_btn _block">领取考试大纲</view>
		</view>

		<!-- 分享示例 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>

		<!-- 截图 -->
		<subfunction v-if="searchVal && !showMember" @share="_shareOpen" :scrollTop="topHeight" @_top="_top"></subfunction>

		<!-- 历年招生人数 -->
		<mBottomPopup
			:btns="[{ text: '查看考试报告', _color: true }]"
			:showBtns="true"
			@_close="showRecruitStudents = false"
			@_btn="(e) => popupBtnClick(e, detailInfo)"
			title="历年招生人数"
			:showPopup="showRecruitStudents"
		>
			<view class="school-info-box">
				<view class="school-info">
					<view class="nature" v-if="schoolInfo.school_type" :class="[schoolType[ schoolInfo.school_type ]]">{{ schoolInfo.school_type }}</view>
					<view class="table-bold">{{ schoolInfo.school_name }}</view>
				</view>
				<view class="majortips">
					<view class="border-major">{{ schoolInfo.major_name }}</view>
				</view>
				<view class="school-table echarts_box echarts_box_bg baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<qiun-data-charts
						v-if="showRecruitStudents"
						type="area"
						@complete="(e) => complete(e, 'controlLine')"
						tooltipFormat="controlLineDemo"
						:opts="controlLineInfo.options"
						:chartData="controlLineInfo.chartsDataLine"
					/>
				</view>
			</view>
		</mBottomPopup>
	</scroll-view>
</template>

<script>
import mSearch from '../components/m-search';
import subfunction from '../components/subfunction.vue';
import mBottomPopup from '@/components/m-bottom-popup/m-bottom-popup.vue';
import listSelection from '../components/listSelection.vue';
import memberBenefits from '../components/memberBenefits.vue';
export default {
	components: {
		mSearch,
		subfunction,
		mBottomPopup,
		listSelection,
		memberBenefits
	},
	data() {
		return {
			searchVal: '',
			scrollTop: 0,
			topHeight: 0,
			searchArr: [
				{
					key: 'year',
					list: [],
					unit: '年',
					checkSearch: '',
					checkInfo: {},
					placeholder: '考试年份'
				},
				{
					key: 'stu_type',
					list: [],
					checkSearch: '',
					checkInfo: {},
					placeholder: '考生类型'
				},
				{
					key: 'school_type',
					list: [],
					checkSearch: '',
					checkInfo: {},
					placeholder: '院校类型'
				}
			],
			showRecruitStudents: false,
			controlLineInfo: {
				// 折线图数据
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 30, 0, 10],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					noteMerge: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 2,
						boundaryGap: 'center',
						title: '年份',
						titleFontSize: 12,
						titleFontColor: '#858688',
						titleOffsetY: -25,
						titleOffsetX: -20,
						calibration: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						unit: '人',
						showTitle: true,
						eachRange: 50,
						data: [
							{
								min: 0,
								// max: 600,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '人数',
								fontSize: 10,
								fontColor: '#858688',
								// calibration: true,
								tofix: 0,
								titleFontSize: 12,
								titleFontColor: '#858688',
								titleOffsetY: -6,
								titleOffsetX: 4
							}
						]
					},
					extra: {
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF'
						}
					}
				},
				chartsDataLine: {
					categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
					series: [
						{
							name: '招生人数',
							data: [100, 180, 160, 200, 165, 210]
						}
					]
				}
			},
			schoolList: [],
			searchApiInfo: {
				api: 'getLicationUniversityMajorList',
				data: 'major_name',
				checklabel: 'major_name'
			},
			majorInfo: {},
			detailInfo: {},
			schoolInfo: {},


			isLoading: true
		};
	},
	watch: {
		searchVal(curr) {
			if (!this.isLoading) {
				this.getInfo();
			}
		}
	},
	methods: {
		checkSearch(info) {
			let that = this;
			that.searchVal = info[that.searchApiInfo.checklabel];
			that.majorInfo = info;

			that.isLoading = false;
		},
		async getInfo() {
			let that = this;
			if (!that.searchVal) {
				that.schoolList = [];
				that.majorInfo = {};
				return;
			}
			that.getUniversityMajorPlan();
		},
		async getUniversityMajorPlan() {
			let that = this;
			console.log(that.searchArr)
			let obj = {
				major_id: that.majorInfo.major_id
			};
			that.searchArr.forEach((item) => {
				obj[item.key] = item.checkSearch;
			});
			let { code, data } = await that.$application_api.getUniversityMajorPlan(obj);
			if (code != 0) return;
			that.searchArr.forEach(async (item, index) => {
				if (data[item.key]) {
					item.list = data[item.key].filter((lis) => !!lis);
				}
				if (item.key === 'year') {
					if (!item.checkSearch) {
						item.checkSearch = item.list[0];
						await that.getUniversityMajorPlan();
					} else {
						that.schoolList = data.all_data || [];
					}
				}
			});
		},
		// 查看历年招生人数
		recruitStudents(info) {
			this.detailInfo = {
				major_id: info.major_id,
				university_school_id: info.school_id
			};
			this.schoolInfo = info;
			this.showRecruitStudents = true;
			this.getPlanEcharts();

		},
		async getPlanEcharts() {
			let that = this;
			let controlLineInfo = Object.assign({},that.controlLineInfo);
			controlLineInfo.chartsDataLine.categories = [];
			controlLineInfo.chartsDataLine.series[0].data = [];
			let { code, data } = await that.$application_api.getPlanEcharts({
				major_id: that.detailInfo.major_id,
				university_school_id: that.detailInfo.university_school_id
			});
			if (code != 0) return;
			
			let year = that.searchArr[0].checkSearch;
			let _index = 0;
			if (data.echarts_data.year && data.echarts_data.year.length) {
				data.echarts_data.year.forEach((item, index) => {
					if (item === year) {
						_index = index;
					}
				});
			}
			controlLineInfo.index = _index;
			// X轴数据
			controlLineInfo.chartsDataLine.categories = data.echarts_data.year || [];
			// Y轴数据
			controlLineInfo.chartsDataLine.series[0].data = data.echarts_data.plan || [];
			let eachRange = Math.max.apply(null, data.echarts_data.plan);
			if (eachRange < 5) {
				eachRange = 10;
			} else {
				eachRange = 0;
			}
			
			controlLineInfo.options.yAxis.eachRange = eachRange;
			if (controlLineInfo.chartsDataLine.categories.length) {
				that.showRecruitStudents = true;
			}

			that.controlLineInfo = Object.assign({},controlLineInfo);
		},
		async confirm(e, index) {
			if (this.searchArr[index].label) {
				this.searchArr[index].checkInfo = e;
			} else {
				this.searchArr[index].checkSearch = e;
			}
			await this.getUniversityMajorPlan();
		},
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		}
	},
	onLoad(){
		let that = this;
		getApp().globalData.isLiscation = true;
		let searchDataInfo = uni.getStorageSync('searchDataInfo');
		let activeInfo = searchDataInfo.checkInfo;
		that.checkSearch(activeInfo);
	},
};
</script>

<style lang="scss" scoped>
._padding {
	padding: 0 40rpx;
	box-sizing: border-box;
}
._page {
	width: 100vw;
	min-height: 100vh;
	background-color: #ffffff;
	box-sizing: border-box;
}
/deep/ .uni-navbar__header-btns-left {
	width: max-content !important;
}
.nav_title {
	/* #ifdef APP-PLUS||H5 */
	display: inline-flex;
	width: 100%;
	height: 100%;
	align-items: center;
	z-index: 1;
	/* #endif */
	font-size: 40rpx;
	color: #121317;
	font-weight: bold;
}

.content-box {
	width: 100vw;
	padding: 44rpx 0 70rpx 39rpx;
	box-sizing: border-box;

	.search-box{
		padding-right: 39rpx;
		box-sizing: border-box;
	}
}
</style>
